<template>
      <el-form ref="conditionsSetForm" :model="form" label-width="124px" :rules="rules">
        <el-form-item label="维护时间">
          <el-date-picker
            v-model="rangeTime"
            type="datetimerange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            :default-time="['00:00:00', '23:59:59']"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerDayStep">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="产品端维护">
          <el-checkbox-group v-model="form.maintenFlag">
            <el-checkbox label="产品端维护" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="游戏平台维护">
          <el-checkbox-group v-model="itemNameAndId">
            <el-checkbox v-for="(item,index) in consts.GAME_ID" :label="item.label+','+item.value" name="type" :key="index+'GAME_ID'">{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="游戏平台转账维护">
          <el-checkbox-group v-model="transferNameAndId">
            <el-checkbox v-for="(item,index) in list" :label="item.channelName+','+item.channelId" :key="index+'GAME_PLATFOMRS'">{{item.channelName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="维护内容" prop="reason">
          <el-input type="textarea" v-model="form.reason"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveForm">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
</template>
<script>
import { form, dialog, pickerOption } from '@/build';
import { gamePlatformMaintainUpdate as miantianUpdate } from '@/services/api/game';

export default {
  name: 'mainTainSetting',
  mixins: [form, dialog, pickerOption],
  props: ['dataRow'],
  data() {
    return {
      rangeTime: [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')],
      itemNameAndId: [],
      transferNameAndId: [],
      form: {
        id: '',
        parentId: this.dataRow.id,
        reason: '',
        startDate: moment().format('YYYY-MM-DD 00:00:00'),
        endDate: moment().format('YYYY-MM-DD 23:59:59'),
        maintenFlag: '',
        itemList: '',
        itemNameList: '',
        transferList: '',
        transferNameList: '',
      },
      rules: {
        reason: [
          { max: 300, message: '维护内容不能超过300字', trigger: 'blur' },
        ],
      },
      saveData: _.cloneDeep(this.dataRow),
    };
  },
  computed: {
    list() {
      return _.filter(consts.GAME_PLATFOMRS, item => item.channelId !== 16); // 虚拟体育用中心钱包
    },
  },
  mounted() {
    this.rangeTime = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')];
    this.bindSave(miantianUpdate, 'saveForm', 'saveData', {
      afterSuccess: () => {
        this.cancel();
        if (this.dataRow.children.length === 0) {
          this.$emit('changeShowList', this.dataRow.id);
        }
        this.$emit('getMaintainList');
      },
    });
  },
  methods: {
    saveForm() {
      if ((this.itemNameAndId.length > 0 || this.transferNameAndId.length > 0 || this.form.maintenFlag) && this.rangeTime == null) {
        this.$notify({
          title: '请选择维护时间',
          type: 'error',
          // message: errorMessage,
          duration: 2000,
        });
        return;
      } if (!(this.itemNameAndId.length > 0 || this.transferNameAndId.length > 0 || this.form.maintenFlag) && this.rangeTime != null) {
        this.$notify({
          title: '请选择维护项',
          type: 'error',
          // message: errorMessage,
          duration: 2000,
        });
        return;
      }
      if (this.itemNameAndId.length === 0 && this.transferNameAndId.length === 0 && !this.form.maintenFlag && this.rangeTime == null) {
        this.$notify({
          title: '请选择维护项和维护时间',
          type: 'error',
          // message: errorMessage,
          duration: 2000,
        });
        return;
      }
      if (this.itemNameAndId.length > 0) {
        const itemList = []; const itemNameList = [];
        for (const item of this.itemNameAndId) {
          const itemArray = item.split(',');
          itemNameList.push(itemArray[0]);
          itemList.push(itemArray[1]);
        }
        this.form.itemList = itemList.toString();
        this.form.itemNameList = itemNameList.toString();
      } else {
        this.form.itemList = '';
        this.form.itemNameList = '';
      }
      if (this.transferNameAndId.length > 0) {
        const transferList = []; const transferNameList = [];
        for (const item of this.transferNameAndId) {
          const itemArray = item.split(',');
          transferNameList.push(itemArray[0]);
          transferList.push(itemArray[1]);
        }
        this.form.transferList = transferList.toString();
        this.form.transferNameList = transferNameList.toString();
      } else {
        this.form.transferList = '';
        this.form.transferNameList = '';
      }
      this.form.maintenFlag = this.form.maintenFlag ? 1 : 0;
      this.form.id = new Date().getTime().toString();
      this.saveData.childrenId = this.form.id;
      this.saveData.children.push(this.form);

      _.each(this.saveData.children, (item) => {
        item.startDate = _.toTime(item.startDate);
        item.endDate = _.toTime(item.endDate);

        delete item._expanded;
        delete item._level;
        delete item._show;
        delete item.parent;
      });

      delete this.saveData._expanded;
      delete this.saveData._level;
      delete this.saveData._show;

      this.dateConfirm();
      this.doSave({ action: 'saveForm', form: 'conditionsSetForm' });
    },
    dateConfirm() {
      if (this.rangeTime == null) {
        this.form.startDate = '';
        this.form.endDate = '';
      }
      if (this.rangeTime && this.rangeTime.length > 0) {
        this.form.startDate = this.rangeTime[0];
        this.form.endDate = this.rangeTime[1];
      }
    },
    cancel() {
      this.$emit('input', false);
    },
  },
};
</script>
<style scoped lang="scss" type="text/css">
  .el-checkbox{
    width: 30%;
    margin-right: 0;
  }
  .el-checkbox+.el-checkbox{
    margin-left: 0;
  }
</style>
